<template>
  <div class="h5Theme-area">
    <div class="changeBgEntry">
      <div class="text">小屏背景</div>
      <div class="btn">
        <el-upload class="avatar-uploader" action :show-file-list="false" :http-request="handleFile">
          <div class="select-bg-button"><i class="el-icon-plus"></i>&nbsp;自选</div>
        </el-upload>
        <div class="delate-bg" @click="cancel">取消上传</div>
      </div>
    </div>
    <div class="preview-area">
      <img src="@/assets/image/mobileBgX.png" class="mobileBox" />
      <div class="themeBg" :style="{ backgroundImage: 'url(' + h5Theme + ')' }"></div>
      <img src="@/assets/image/mobileBg.png" class="bottomDCBg" />
    </div>
  </div>
</template>
<script>
import request from '@/utils/request';

export default {
  name: 'h5Theme',
  data() {
    return {
      uploadFile: null,
    };
  },
  props: {
    h5Theme: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleFile(e) {
      // 压缩一下文件
      const freader = new FileReader();
      freader.readAsDataURL(e.file); // 读取照片

      freader.onload = () => {
        this.$emit('uht', freader.result);
        // 这里对base64 进行压缩
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const img = new Image();
        img.src = freader.result;
        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          context.clearRect(0, 0, img.width, img.height);
          context.drawImage(img, 0, 0, img.width, img.height);
          const result = canvas.toDataURL('image/jpeg', 0.7);

          // 转换成 file
          const arr = result.split(',');
          const bstr = atob(arr[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const file = new File([u8arr], 'photo');
          this.uploadFile = file;
          // 调用图片上传接口
          this.requestUploadImg();
        };
      };
    },
    requestUploadImg() {
      const formData = new FormData();
      formData.append('file', this.uploadFile);

      request
        .post('/beiJing/shangchuanTomcat', formData)
        .then((res) => {
          console.log(res);
          this.$emit('uht', res.data.filePath);
          const params = {
            // liveid: this.$store.state.liveId,
            // mobile_imgurl:res.data.filePath
            splid: this.$store.state.liveId,
            phone_piclink: res.data.filePath,
          };
          request
            .post('/qiYeNe/update', params)
            .then((res) => {
              this.$message({
                message: '图片上传成功',
                type: 'success',
              });
              console.log('upload-success', res);
            })
            .catch((err) => {
              console.log(err);
              this.$message.error('图片上传失败!');
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 取消上传 */
    cancel() {
      this.$emit('cu');
    },
  },
};
</script>
<style lang="less" scoped>
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h5Theme-area {
  width: 53%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .preview-area {
    width: 80%;
    position: relative;
    transform: scale(0.85);
    .mobileBox {
      width: 100%;
    }
    .themeBg {
      position: absolute;
      top: 13%;
      left: 15%;
      width: 70%;
      height: 76%;
      border-radius: 0 0 6% 6%;
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;
    }
    .bottomDCBg {
      position: absolute;
      // top: 13%;
      top: 52%;
      left: 15%;
      width: 70%;
      // height: 76%;
      height: 36%;
      border-radius: 0 0 6% 6%;
    }
  }
  .changeBgEntry {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    .text {
      margin-right: 20px;
    }
    .select-bg-button {
      cursor: pointer;
      font-size: 13px;
      color: #3694f1;
      text-align: center;
      width: 67px;
      height: 26px;
      line-height: 26px;
      border-radius: 3px;
      border: dashed 1px #3694f1;
      margin: 10px auto;
    }
    .delate-bg {
      color: #409eff;
      font-size: 14px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}
</style>
